<template>
  <div class="root">
      <div class="view-root">
        <el-container class="container">
          <el-header class="header">
            <div class="title-area video-search-area">
              <div class="label">明星：</div>
              <el-input class="ipt" v-model="searchData.name"></el-input>
            </div>
            <div class="description-area video-search-area">
              <div class="label">描述：</div>
              <el-input class="ipt" v-model="searchData.description"></el-input>
            </div>
            <div class="title-area video-search-area">
              <div class="label">注册时间：</div>
              <el-date-picker
                  v-model="searchData.params.createTimeRange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </div>
            <div class="label-area video-search-area">
              <div class="label">类型：</div>
              <el-select clearable v-model="searchData.type" placeholder="" style="width: 240px">
                <el-option
                    key="个人"
                    label="个人"
                    value="1"
                />
                <el-option
                    key="团队"
                    label="团队"
                    value="2"
                />
              </el-select>
            </div>
            <el-button class="search-btn" type="primary" @click="loadArtistPage">
              <el-icon><Search /></el-icon>
            </el-button>
            <el-button class="search-btn" type="success" @click="exportArtistList()">
              导出
            </el-button>
            <el-button class="search-btn" type="warning" @click="openAddDialog()">
              新增
            </el-button>
          </el-header>
          <el-main class="main">
            <el-table :data="viewData.artistList" class="table" width="100%">
              <el-table-column prop="id" label="ID" width="50" />
              <el-table-column prop="avatar" label="头像" width="150">
                <template #default="scope">
                  <div>
                    <img style="width: 100%;
                              height: 100%;
                              object-fit: cover;
                            "
                         :src="scope.row.avatarUrl"
                         alt="">
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="明星名" width="150" />
              <el-table-column prop="description" label="描述" width="150" />
              <el-table-column prop="type" label="类型" width="80" >
                <template #default="scope">
                  <div v-if="scope.row.type === 1">
                    <el-tag>个人</el-tag>
                  </div>
                  <div v-else-if="scope.row.type === 2">
                    <el-tag>团队</el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="注册时间" width="200" />
              <el-table-column prop="updateTime" label="最近修改时间" width="200" />
              <el-table-column label="操作" width="280">
                <template #default="scope">
                  <el-button type="success" @click="openUpdateDialog(scope.row)">修改</el-button>
                  <el-button type="danger" @click="deleteArtist(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="viewData.total"
                v-model:page-size="viewData.size"
                v-model:current-page="viewData.current"
                :page-count="viewData.pages"
            />

            <!--     对话框     -->
            <!--     修改对话框     -->
            <el-dialog class="update-dialog" v-model="updateDialog.visible" title="修改明星" width="500">
              <el-form :model="updateDialog.form">
                <div class="avatar-area">
                  <van-uploader
                      class="avatar-uploader"
                      :before-read="beforeReadUpdateDialogAvatar"
                      :max-count="1"
                      v-model="updateDialog.form.avatarFile"
                      :multiple="false"
                  >
                </van-uploader>
                </div>
                <el-form-item label="ID：" :label-width="updateDialog.formLabelWidth">
                  <el-input v-model="updateDialog.form.id" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="明星名：" :label-width="updateDialog.formLabelWidth">
                  <el-input clearable v-model="updateDialog.form.name" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="描述：" :label-width="updateDialog.formLabelWidth">
                  <el-input clearable v-model="updateDialog.form.description" autocomplete="off" />
                </el-form-item>
                <el-form-item label="类型：" :label-width="updateDialog.formLabelWidth">
                  <el-select v-model="updateDialog.form.type" placeholder="" style="width: 240px">
                    <el-option
                        key="1"
                        label="个人"
                        value="个人"
                    />
                    <el-option
                        key="2"
                        label="团队"
                        value="团队"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="closeUpdateDialog">取消</el-button>
                  <el-button type="primary" @click="updateArtist">
                    确认
                  </el-button>
                </div>
              </template>
            </el-dialog>

            <!--     新增对话框     -->
            <el-dialog class="add-dialog" v-model="addDialog.visible" title="新增明星" width="500">
              <el-form :model="addDialog.form">
                <div class="avatar-area">
                  <van-uploader
                      class="avatar-uploader"
                      :before-read="beforeReadAddDialogAvatar"
                      :max-count="1"
                      v-model="addDialog.form.avatarFile"
                      :multiple="false"
                  >
                  </van-uploader>
                </div>
                <el-form-item label="明星名：" :label-width="addDialog.formLabelWidth">
                  <el-input clearable v-model="addDialog.form.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="描述：" :label-width="addDialog.formLabelWidth">
                  <el-input clearable v-model="addDialog.form.description" autocomplete="off" />
                </el-form-item>
                <el-form-item label="类型：" :label-width="addDialog.formLabelWidth">
                  <el-select v-model="addDialog.form.type" placeholder="" style="width: 240px">
                    <el-option
                        key="个人"
                        label="个人"
                        value="1"
                    />
                    <el-option
                        key="团队"
                        label="团队"
                        value="2"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="closeAddDialog">取消</el-button>
                  <el-button type="primary" @click="addArtist">
                    确认
                  </el-button>
                </div>
              </template>
            </el-dialog>


          </el-main>
        </el-container>
      </div>
  </div>
</template>

<script>

import {
  exportArtistListApi,
  getArtistCountApi,
  updateArtistInfoApi,
  getArtistPageApi,
  deleteArtistApi,
  getArtistInfoApi,
  addArtistApi
} from "@/api/artist-api.js";
import {uploadImageApi} from "@/api/file-api.js";

export default {
  name: "ArtistView",
  components: {},
  data() {
    return {
      searchData: {
        type: '',
        description: '',
        name: '',
        pageNum: 1,
        pageSize: 5,
        params: {
          beginCreateTime: '',
          endCreateTime: '',
          createTimeRange: [null, null],
        }
      },
      viewData: {
        total: 1000, //  数据库中的总数据量
        size: 10, //  每页显示的条数
        current: 1, //  当前页码
        pages: 200,  //  总页数
        //  明星列表
        artistList: [
          {
            id: '1',
            name: '喜剧之王',
            avatarUrl: '',
            avatarFile: '',
            description: '',
            type: '',
            createTime: '2022-01-01 00:00:00',
          },
        ],
      },

      //  修改对话框
      updateDialog: {
        visible: false,
        formLabelWidth: '140px',
        form: {
          id: '',
          avatarUrl: '',
          avatarFile: '',
          name: '',
          description: '',
          type: '',
        },
      },
      //  新增对话框
      addDialog: {
        visible: false,
        formLabelWidth: '140px',
        form: {
          id: '',
          avatarUrl: '',
          avatarFile: '',
          name: '',
          description: '',
          type: '',
        },
      },
    }
  },
  methods: {
    exportArtistList() {
      exportArtistListApi()
    },
    //  加载明星分页
    async loadArtistPage() {
      this.searchData.pageNum = this.viewData.current
      this.searchData.pageSize = this.viewData.size
      console.log('检索数据', this.searchData)
      let data = await getArtistPageApi(this.searchData)
      if (data.code === 200) {
        data = data.data
        this.viewData.artistList = data.records
        this.viewData.total = data.total
        this.viewData.pages = data.pages
        this.viewData.size = data.size
        this.viewData.current = data.current
      }

    },
    //  打开更新对话框
    openUpdateDialog(row) {
      console.log( "点击的行数据", row)
      //  同步数据到对话框
      this.updateDialog.form = {
        id: row.id,
        name: row.name,
        description: row.description,
        type: row.type,
        address: row.address,
      }
      this.updateDialog.visible = true
    },
    //  关闭更新对话框
    closeUpdateDialog() {
      this.updateDialog.visible = false
      this.updateDialog.form = {}
    },
    //  打开新增对话框
    openAddDialog(row) {
      console.log( "点击的行数据", row)
      //  同步数据到对话框
      this.addDialog.form = {
        name: '',
        description: '',
        type: '',
      }
      this.addDialog.visible = true
    },
    //  关闭新增对话框
    closeAddDialog() {
      this.addDialog.visible = false
      this.addDialog.form = {}
    },
    //  更新明星
    async updateArtist() {
      //  更新明星
      console.log('即将更新明星信息', this.updateDialog.form)
      await updateArtistInfoApi(this.updateDialog.form)
      //  关闭对话框
      this.closeUpdateDialog()
      //  加载明星列表
      await this.loadArtistPage()
    },
    async deleteArtist(row) {
      //  删除明星
      await deleteArtistApi(row.id)
      //  加载明星列表
      await this.loadArtistPage()
    },
    async addArtist(row) {
      //  删除明星
      await addArtistApi(this.addDialog.form)
      //  关闭对话框
      this.closeAddDialog()
      //  加载明星列表
      await this.loadArtistPage()
    },
    //  新增对话框中上传头像
    async beforeReadAddDialogAvatar(file) {
      let r = await uploadImageApi(file)
      if (r.code === 200) {
        this.addDialog.form.avatarUrl = r.data
        console.log('头像上传成功', r.data)
      } else {
        console.log('头像上传失败')
      }

    },
    //  修改对话框中上传头像
    async beforeReadUpdateDialogAvatar(file) {
      let r = await uploadImageApi(file)
      if (r.code === 200) {
        this.updateDialog.form.avatarUrl = r.data
        console.log('头像上传成功', r.data)
      } else {
        console.log('头像上传失败')
      }
    },

  },
  mounted() {
    //  加载明星列表
    this.loadArtistPage()
  },
  watch: {
    'viewData.current'(newValue, oldValue) {
      this.loadArtistPage()
    },
    'viewData.size'(newValue, oldValue) {
      this.loadArtistPage()
    },
    'searchData.params.createTimeRange'(newValue, oldValue) {
      console.log('注册时间选择发生变化', newValue)
      this.searchData.params.beginCreateTime = newValue[0].toLocaleString().replace(/\//g, '-')
      this.searchData.params.endCreateTime = newValue[1].toLocaleString().replace(/\//g, '-')
      console.log('====>time', this.searchData.params)
    },
  },
}
</script>

<style lang="scss" scoped>
@use "artist-view.scss";
</style>
